<template>
  <div class="nav-menu">
    <div class="logo">
      <img class="img" src="@/assets/img/logo.svg" alt="" />
      <h2 v-show="!isCollapse" class="title">XW管理系统</h2>
    </div>
    <div class="menus">
      <!-- 属性 default-active 找id -->
      <!--  :collapse="false" 是否折叠 -->
      <el-menu
        :default-active="defaultActive"
        :collapse="isCollapse"
        text-color="#b7bdc3"
        active-text-color="#fff"
        background-color="#001529"
      >
        <!-- 遍历菜单 -->
        <template v-for="item in UserMenus" :key="item.id">
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <!-- 字符串转组件 -->
              <!-- <el-icon><Monitor /></el-icon> -->
              <el-icon>
                <!-- 动态组件 -->
                <component :is="item.icon.split('el-icon-')[1]" />
              </el-icon>
              <span>{{ item.name }}</span>
            </template>

            <template v-for="subiItem in item.children" :key="subiItem.id">
              <el-menu-item :index="subiItem.id + ''" @click="handleItemClick(subiItem)">{{
                subiItem.name
              }}</el-menu-item>
            </template>
          </el-sub-menu>
        </template>

        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><Monitor /></el-icon>
            <span>系统总揽</span>
          </template>
          <el-menu-item index="1-1">菜单1</el-menu-item>
          <el-menu-item index="1-2">菜单2</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="2-1">菜单1</el-menu-item>
          <el-menu-item index="2-2">菜单2</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><FolderChecked /></el-icon>
            <span>资源中心</span>
          </template>
          <el-menu-item index="3-1">菜单1</el-menu-item>
          <el-menu-item index="3-2">菜单2</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户中心</span>
          </template>
          <el-menu-item index="4-1">菜单1</el-menu-item>
          <el-menu-item index="4-2">菜单2</el-menu-item>

          <el-sub-menu index="4-3">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户中心嵌套</span>
            </template>
            <el-menu-item index="4-3-1">菜单1</el-menu-item>
            <el-menu-item index="4-3-2">菜单2</el-menu-item>
          </el-sub-menu>
        </el-sub-menu> -->
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import { localCache } from '@/utils/cache'
import { useRoute, useRouter } from 'vue-router'
import { firstMenu } from '../../storage/login/login'
import { mapPathToMenu } from '../../utils/map-menu'
import { ref } from 'vue'
import { computed } from 'vue'

// import router from '@/router'
// 定义props 接收父组件内容 [接收后直接用]
defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
})

const UserMenus = localCache.getCache('userMenus')

// 2.监听item的点击
const router = useRouter()
function handleItemClick(item: any) {
  const url = item.url
  console.log(url)
  router.push(url) // 路由前面必须要有“/” 否者路由就会追加在原始路由后面
}

// 获取当前路径
const route = useRoute()

const defaultActive = computed(() => {
  const subMenu = mapPathToMenu(route.path, UserMenus)
  // 活跃菜单
  return subMenu.id + '' // 面包屑用  重新计算新的路径
})
</script>

<style scoped>
.nav-menu {
  background: black;
  height: 100%;
}

.logo {
  display: flex;
  height: 28px;
  padding: 12px 10px 8px 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.img {
  height: 100%;
  margin: 0 10px;
}
.title {
  font-size: 16px;
  font-weight: 700;
  color: aliceblue;
  white-space: nowrap;
}

.el-menu {
  border-right: none;
  user-select: none;
}

.el-sub-menu {
  .el-menu-itme {
    padding-left: 50px !important;
    background-color: #0c2135;
  }
}
.el-menu-itme:hover {
  color: rgb(255, 255, 255);
}
.el-menu-itme.is-active {
  color: #0a60db;
}

.el-sub-menu {
  .el-menu-item {
    padding-left: 50px !important;
    background-color: #0c2135;
  }

  .el-menu-item:hover {
    color: #fff;
  }

  .el-menu-item.is-active {
    background-color: #0a60bd;
  }
}
</style>
